<template>
  <view class="order-detail-page">
    <!-- 顶部导航栏 -->
    <uni-nav-bar 
      :border="false"
      background-color="#ffffff"
      color="#333333"
      :title="getPageTitle()"
      left-icon="left"
      @clickLeft="goBack"
    >
      <template #right>
        <view class="nav-right">
          <view class="refresh-btn" @click="refreshOrderData">
            <text class="refresh-icon">🔄</text>
            <text class="refresh-text">刷新</text>
          </view>
        </view>
      </template>
    </uni-nav-bar>

    <!-- 订单详情内容 -->
    <view class="order-detail-content">
      <!-- 订单状态卡片 -->
      <view class="status-card" :class="[orderDetail.serviceType, orderDetail.status]">
        <view class="status-header">
          <view class="status-main">
            <text class="status-title">{{ getStatusText(orderDetail.status) }}</text>
            <text class="status-desc">{{ getStatusDesc(orderDetail.status) }}</text>
          </view>
          <view v-if="orderDetail.priority" class="priority-badge" 
                :style="{ 
                  color: getPriorityInfo(orderDetail.priority).color,
                  backgroundColor: getPriorityInfo(orderDetail.priority).bgColor 
                }">
            {{ getPriorityInfo(orderDetail.priority).text }}
          </view>
        </view>
        <view class="status-icon" :class="orderDetail.serviceType">
          {{ getServiceTypeIcon(orderDetail.serviceType) }}
        </view>
      </view>

      <!-- 订单基本信息 -->
      <view class="order-info-card">
        <view class="card-header">
          <text class="section-title">订单信息</text>
        </view>
        
        <view class="detail-item">
          <text class="label">订单编号:</text>
          <text class="value">{{ orderDetail.orderId }}</text>
        </view>

        <view class="detail-item">
          <text class="label">服务类型:</text>
          <text class="value service-type">{{ getServiceTypeText(orderDetail.serviceType) }}</text>
        </view>

        <view class="detail-item">
          <text class="label">{{ orderDetail.status === 'ongoing' ? '接单时间:' : '完成时间:' }}</text>
          <text class="value">{{ orderDetail.status === 'ongoing' ? orderDetail.orderTime : (orderDetail.completeTime || '未知') }}</text>
        </view>

        <view class="detail-item">
          <text class="label">订单金额:</text>
          <text class="value price">¥{{ orderDetail.totalAmount }}</text>
        </view>

        <!-- 客户联系信息 -->
        <view v-if="orderDetail.customerName && orderDetail.customerName !== '我'" class="detail-item contact-section">
          <text class="label">客户信息:</text>
          <view class="customer-info">
            <view class="customer-name">
              <text class="name-text">{{ orderDetail.customerName }}</text>
            </view>
            <view v-if="orderDetail.customerPhone" class="customer-phone" @click="makePhoneCall(orderDetail.customerPhone)">
              <text class="phone-icon">📞</text>
              <text class="phone-text">{{ orderDetail.customerPhone }}</text>
              <text class="call-hint">点击拨打</text>
            </view>
          </view>
        </view>

        <!-- 联系方式信息 -->
        <view v-if="orderDetail.contactInfo && !orderDetail.contactInfo.includes('我的接单')" class="detail-item contact-detail">
          <text class="label">联系方式:</text>
          <view class="contact-content" @click="extractAndCallPhone(orderDetail.contactInfo)">
            <text class="contact-text">{{ orderDetail.contactInfo }}</text>
            <text class="call-hint">点击拨打电话</text>
          </view>
        </view>
        
        <view v-if="orderDetail.status === 'completed'" class="detail-item">
          <text class="label">完成时间:</text>
          <text class="value">{{ orderDetail.completeTime || '未知' }}</text>
        </view>
      </view>

      <!-- 快递代取特有信息 -->
      <view v-if="orderDetail.serviceType === 'express'" class="express-details-card">
        <view class="card-header">
          <text class="section-title">快递信息</text>
        </view>
        
        <view class="detail-item">
          <text class="label">配送地址:</text>
          <text class="value">{{ orderDetail.deliveryLocation || orderDetail.delivery }}</text>
        </view>

        <view class="detail-item">
          <text class="label">期望送达:</text>
          <text class="value">{{ orderDetail.deliveryTime || '立即送出' }}</text>
        </view>

        <view class="detail-item">
          <text class="label">基础费用:</text>
          <text class="value">¥{{ orderDetail.baseFee || 5 }}</text>
        </view>

        <view class="detail-item">
          <text class="label">小费金额:</text>
          <text class="value">¥{{ orderDetail.tipAmount || 0 }}</text>
        </view>
      </view>

      <!-- 外卖代取特有信息 -->
      <view v-if="orderDetail.serviceType === 'takeout'" class="takeout-details-card">
        <view class="card-header">
          <text class="section-title">外卖信息</text>
        </view>
        
        <view class="detail-item">
          <text class="label">取餐地址:</text>
          <text class="value">{{ orderDetail.pickup }}</text>
        </view>

        <view class="detail-item">
          <text class="label">配送地址:</text>
          <text class="value">{{ orderDetail.delivery }}</text>
        </view>

        <view class="detail-item">
          <text class="label">配送时间:</text>
          <text class="value">{{ orderDetail.deliveryTime || '立即送出' }}</text>
        </view>

        <view class="detail-item">
          <text class="label">基础费用:</text>
          <text class="value">¥{{ orderDetail.baseFee || 5 }}</text>
        </view>

        <view class="detail-item">
          <text class="label">小费金额:</text>
          <text class="value">¥{{ orderDetail.tipAmount || 0 }}</text>
        </view>
      </view>

      <!-- 代购服务特有信息 -->
      <view v-if="orderDetail.serviceType === 'shopping'" class="shopping-details-card">
        <view class="card-header">
          <text class="section-title">代购信息</text>
        </view>
        
        <view class="detail-item">
          <text class="label">代购地点:</text>
          <text class="value">{{ orderDetail.pickup }}</text>
        </view>

        <view class="detail-item">
          <text class="label">配送地址:</text>
          <text class="value">{{ orderDetail.delivery }}</text>
        </view>

        <view class="detail-item">
          <text class="label">预算范围:</text>
          <text class="value">¥{{ orderDetail.budget || '不限' }}</text>
        </view>

        <view class="detail-item">
          <text class="label">期望时间:</text>
          <text class="value">{{ orderDetail.estimatedTime || '尽快' }}</text>
        </view>

        <view v-if="orderDetail.itemList && orderDetail.itemList.length > 0" class="shopping-items-section">
          <text class="section-subtitle">代购物品</text>
          <view class="shopping-item-list">
            <view v-for="(item, index) in orderDetail.itemList" :key="index" class="shopping-item">
              <view class="item-main">
                <text class="item-number">{{ index + 1 }}</text>
                <text class="item-name">{{ item.name }}</text>
                <text class="item-quantity">x{{ item.quantity }}</text>
              </view>
              <view class="item-specs">
                <text v-if="item.brand" class="item-brand">品牌: {{ item.brand }}</text>
                <text v-if="item.specifications" class="item-spec">规格: {{ item.specifications }}</text>
              </view>
              <view class="item-footer">
                <text class="item-price">约¥{{ item.estimatedPrice }}</text>
                <text v-if="item.alternatives" class="item-alt">可替代</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 代取文件特有信息 -->
      <view v-if="orderDetail.serviceType === 'document'" class="document-details-card">
        <view class="card-header">
          <text class="section-title">文件信息</text>
        </view>
        
        <view class="detail-item">
          <text class="label">取件地点:</text>
          <text class="value">{{ orderDetail.pickup }}</text>
        </view>

        <view class="detail-item">
          <text class="label">配送地址:</text>
          <text class="value">{{ orderDetail.delivery }}</text>
        </view>

        <view class="detail-item">
          <text class="label">文件类型:</text>
          <text class="value">{{ orderDetail.documentType || '普通文件' }}</text>
        </view>

        <view class="detail-item">
          <text class="label">紧急程度:</text>
          <text class="value">{{ getPriorityInfo(orderDetail.priority || 'normal').text }}</text>
        </view>

        <view class="detail-item">
          <text class="label">期望时间:</text>
          <text class="value">{{ orderDetail.estimatedTime || '尽快' }}</text>
        </view>
      </view>

      <!-- 代取药品特有信息 -->
      <view v-if="orderDetail.serviceType === 'medicine'" class="medicine-details-card">
        <view class="card-header">
          <text class="section-title">药品信息</text>
        </view>
        
        <view class="detail-item">
          <text class="label">取药地点:</text>
          <text class="value">{{ orderDetail.pickup }}</text>
        </view>

        <view class="detail-item">
          <text class="label">配送地址:</text>
          <text class="value">{{ orderDetail.delivery }}</text>
        </view>

        <view class="detail-item">
          <text class="label">处方类型:</text>
          <text class="value">{{ orderDetail.prescription || '普通药品' }}</text>
        </view>

        <view class="detail-item">
          <text class="label">特殊说明:</text>
          <text class="value">{{ orderDetail.instructions || '无' }}</text>
        </view>

        <view class="notice-card medicine">
          <text class="notice-title">⚠️ 药品配送提醒</text>
          <text class="notice-text">请确保药品包装完整，避免破损。如有特殊存储要求，请提前告知。</text>
        </view>
      </view>

      <!-- 其他服务特有信息 -->
      <view v-if="orderDetail.serviceType === 'other'" class="other-details-card">
        <view class="card-header">
          <text class="section-title">服务详情</text>
        </view>
        
        <view class="detail-item">
          <text class="label">服务地点:</text>
          <text class="value">{{ orderDetail.pickup }}</text>
        </view>

        <view class="detail-item">
          <text class="label">服务地址:</text>
          <text class="value">{{ orderDetail.delivery }}</text>
        </view>

        <view class="detail-item">
          <text class="label">服务说明:</text>
          <text class="value description">{{ orderDetail.instructions || '无特殊说明' }}</text>
        </view>

        <view class="detail-item">
          <text class="label">紧急程度:</text>
          <text class="value">{{ getPriorityInfo(orderDetail.priority || 'normal').text }}</text>
        </view>
      </view>

      <!-- 物品规格信息 -->
      <view v-if="orderDetail.weight || orderDetail.size || orderDetail.fragile" class="item-specs-card">
        <view class="card-header">
          <text class="section-title">物品规格</text>
        </view>
        
        <view v-if="orderDetail.weight" class="detail-item">
          <text class="label">重量:</text>
          <text class="value">{{ orderDetail.weight }}</text>
        </view>

        <view v-if="orderDetail.size" class="detail-item">
          <text class="label">尺寸:</text>
          <text class="value">{{ orderDetail.size }}</text>
        </view>

        <view v-if="orderDetail.fragile" class="detail-item">
          <text class="label">易碎品:</text>
          <text class="value fragile">是</text>
        </view>
      </view>

      <!-- 拍照区域 -->
      <view class="image-section">
        <text class="section-title">订单照片</text>
        
        <!-- 拍照按钮区域 - 只在订单进行中显示 -->
        <view v-if="orderDetail.status === 'ongoing'" class="camera-area">
          <button 
            class="camera-btn" 
            @click="showCameraOptions"
            :disabled="uploading || orderImages.length >= maxImageCount"
          >
            <view class="btn-content">
              <text class="camera-icon">📷</text>
              <text class="btn-text">
                {{ uploading ? '上传中...' : `拍照记录 (${orderImages.length}/${maxImageCount})` }}
              </text>
            </view>
          </button>
        </view>

        <!-- 图片预览区域 -->
        <view v-if="orderImages.length > 0" class="image-preview">
          <view class="preview-header">
            <text class="preview-title">已拍摄照片</text>
          </view>
          <view class="image-grid">
            <view 
              v-for="(image, index) in orderImages" 
              :key="index" 
              class="image-item"
            >
              <image 
                :src="image.url" 
                class="preview-image" 
                mode="aspectFill"
                @click="previewOrderImage(image.url)"
              />
              <view class="image-actions">
                <view class="action-btn preview" @click="previewOrderImage(image.url)">
                  👁️
                </view>
                <view 
                  v-if="orderDetail.status === 'ongoing'" 
                  class="action-btn delete" 
                  @click="deleteOrderImage(index)"
                >
                  🗑️
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态提示 -->
        <view v-if="orderImages.length === 0" class="empty-tip">
          <text class="tip-text">📸 {{ orderDetail.status === 'ongoing' ? '还没有拍摄照片' : '该订单没有照片记录' }}</text>
          <text v-if="orderDetail.status === 'ongoing'" class="tip-desc">点击上方按钮开始拍照记录订单过程</text>
          <text v-else class="tip-desc">订单完成时未保存照片</text>
        </view>
      </view>

      <!-- 骑手信息 -->
      <view v-if="orderDetail.status === 'ongoing'" class="rider-section">
        <view class="rider-card">
          <view class="rider-header">
            <text class="rider-title">骑手信息</text>
          </view>
          <view class="rider-info">
            <text class="rider-name">张三</text>
            <view class="rider-phone-section" @click="makePhoneCall('13800138000')">
              <text class="rider-phone">138****8888</text>
              <text class="call-hint">点击拨打</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部操作按钮 -->
      <view v-if="orderDetail.status === 'ongoing'" class="bottom-actions ongoing">
        <button class="complete-btn" @click="completeThisOrder">完成订单</button>
      </view>

      <view v-else-if="orderDetail.status === 'completed'" class="bottom-actions completed">
        <text class="status-text">订单已完成</text>
      </view>

      <!-- 调试信息区域 -->
      <view v-if="showDebugInfo" class="debug-section">
        <view class="debug-header">
          <text class="debug-title">调试信息</text>
          <text class="debug-toggle" @click="toggleDebugInfo">隐藏</text>
        </view>
        <view class="debug-content">
          <view class="debug-item">
            <text class="debug-label">订单ID:</text>
            <text class="debug-value">{{ orderDetail.id }}</text>
          </view>
          <view class="debug-item">
            <text class="debug-label">状态:</text>
            <text class="debug-value" :class="orderDetail.status">{{ orderDetail.status }}</text>
          </view>
          <view class="debug-item">
            <text class="debug-label">服务类型:</text>
            <text class="debug-value">{{ orderDetail.serviceType }}</text>
          </view>
          <view class="debug-item">
            <text class="debug-label">标题:</text>
            <text class="debug-value">{{ orderDetail.title }}</text>
          </view>
          <view class="debug-item">
            <text class="debug-label">完成时间:</text>
            <text class="debug-value">{{ orderDetail.completeTime || '无' }}</text>
          </view>
          
          <!-- 底部空间测试 -->
          <view class="debug-item">
            <text class="debug-label">页面布局:</text>
            <text class="debug-value">一屏显示</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'

// 声明uni全局变量
declare const uni: any
declare const getCurrentPages: () => any[]

// 订单状态类型
type OrderStatus = 'ongoing' | 'completed'

// 扩展的服务类型
type ServiceType = 'express' | 'takeout' | 'shopping' | 'document' | 'medicine' | 'other'

// 订单详情数据类型
interface OrderDetail {
  id: number
  orderId: string
  serviceType: ServiceType
  time: string
  address: string
  contactInfo: string
  pickup: string
  delivery: string
  image?: string
  customerName: string
  customerPhone: string
  extraAmount: string
  totalAmount: string
  orderTime: string
  status: OrderStatus
  priority?: 'low' | 'normal' | 'high' | 'urgent'
  estimatedTime?: string
  weight?: string
  size?: string
  fragile?: boolean
  instructions?: string
  title?: string
  price?: string
  rider?: {
    name: string
    phone: string
    avatar?: string
  }
  // 快递代取特有字段
  deliveryLocation?: string
  deliveryTime?: string
  baseFee?: number
  tipAmount?: number
  items?: ExpressItem[]
  hasMoreRequirements?: boolean
  specialNote?: string
  courierCompany?: string
  trackingNumber?: string
  // 订单完成时间
  completeTime?: string
  // 外卖代取特有字段
  selectedTime?: string
  orderDetail?: string
  basePrice?: number
  restaurant?: string
  orderNumber?: string
  expectedDeliveryTime?: string
  // 代购特有字段
  itemList?: ShoppingItem[]
  budget?: number
  store?: string
  receipt?: boolean
  // 文件/证件代取特有字段
  documentType?: string
  department?: string
  recipientIdRequired?: boolean
  // 药品代购特有字段
  prescription?: boolean
  pharmacy?: string
  urgencyLevel?: 'normal' | 'urgent'
}

// 快递物品信息
interface ExpressItem {
  size: string
  price: string
  pickupCode: string
  pickupLocation: string
  courierCompany?: string
  weight?: string
  description?: string
}

// 代购物品信息
interface ShoppingItem {
  name: string
  quantity: number
  estimatedPrice?: number
  brand?: string
  specifications?: string
  alternatives?: boolean
}

// 响应式数据
const grabbing = ref(false)
const uploading = ref(false)
const orderImages = ref<any[]>([])
const maxImageCount = 6
const showDebugInfo = ref(true) // 显示调试信息
const orderDetail = ref<OrderDetail>({
  id: 1,
  orderId: 'EXP' + Date.now(),
  serviceType: 'express',
  time: '08-11 17:00',
  address: '科技(东院)一图书馆图书馆人\送至一辰海/保理科技校园网吧',
  contactInfo: '理工学院东门 免疫 13483231011',
  pickup: '科技东院—图书馆',
  delivery: '理工科技校园网吧',
  image: '',
  customerName: '免疫',
  customerPhone: '13483231011',
  extraAmount: '0',
  totalAmount: '2.82',
  orderTime: new Date().toLocaleString(),
  status: 'ongoing'
})

// 底部空间控制
// 底部空间控制已移除，改为固定布局

// 页面加载时获取订单详情
onMounted(() => {
  console.log('=== 🚀 订单详情页面开始加载 ===')
  
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const orderId = (currentPage as any).options?.id
  const isTest = (currentPage as any).options?.test
  
  console.log('📱 页面参数:', { orderId, isTest, options: (currentPage as any).options })
  console.log('🔍 当前订单详情初始值:', orderDetail.value)
  
  // 优先尝试从测试数据加载
  if (isTest === 'true') {
    const testOrder = uni.getStorageSync('testOrderDetail')
    if (testOrder) {
      const testData = JSON.parse(testOrder)
      orderDetail.value = {
        ...orderDetail.value,
        ...testData
      }
      console.log('✅ 从测试数据加载订单详情:', orderDetail.value)
      return
    }
  }
  
  // 尝试从"我的接单"数据中获取订单详情
  if (orderId) {
    console.log('🔍 开始查找订单ID:', orderId, '类型:', typeof orderId)
    
    const myOrders = uni.getStorageSync('myOrders')
    if (myOrders) {
      try {
        const myOrdersList = JSON.parse(myOrders)
        console.log('📋 我的接单数据列表:', myOrdersList)
        console.log('📋 数据列表长度:', myOrdersList.length)
        
        // 查找匹配的订单 - 尝试多种匹配方式
        let myOrder = null
        
        // 方式1：直接ID匹配
        myOrder = myOrdersList.find((order: any) => order.id === Number(orderId))
        if (myOrder) {
          console.log('✅ 方式1成功：直接ID匹配')
        } else {
          // 方式2：字符串ID匹配
          myOrder = myOrdersList.find((order: any) => order.id.toString() === orderId.toString())
          if (myOrder) {
            console.log('✅ 方式2成功：字符串ID匹配')
          } else {
            // 方式3：模糊匹配
            myOrder = myOrdersList.find((order: any) => {
              console.log(`🔍 比较: order.id=${order.id}(${typeof order.id}) vs orderId=${orderId}(${typeof orderId})`)
              return order.id == orderId // 使用宽松比较
            })
            if (myOrder) {
              console.log('✅ 方式3成功：宽松比较匹配')
            }
          }
        }
        
        if (myOrder) {
          console.log('🎯 找到匹配的订单:', myOrder)
          console.log('🎯 订单状态:', myOrder.status)
          console.log('🎯 订单标题:', myOrder.title)
          
          // 完全重新构建订单详情对象
          const newOrderDetail = {
            id: myOrder.id,
            orderId: `MY${myOrder.id}`,
            serviceType: myOrder.serviceType || 'express',
            status: myOrder.status, // 关键：这里设置正确的状态
            title: myOrder.title,
            pickup: myOrder.pickup,
            delivery: myOrder.delivery,
            price: myOrder.price,
            totalAmount: myOrder.price,
            orderTime: myOrder.acceptTime,
            completeTime: myOrder.completeTime,
            // 根据服务类型设置其他字段
            deliveryLocation: myOrder.delivery,
            deliveryTime: '立即送出',
            baseFee: parseFloat(myOrder.price),
            tipAmount: 0,
            // 设置其他必要字段的默认值
            time: myOrder.acceptTime,
            address: `${myOrder.pickup} → ${myOrder.delivery}`,
            contactInfo: '我的接单',
            image: '',
            customerName: '我',
            customerPhone: '我的手机号',
            extraAmount: '0'
          }
          
          // 完全替换订单详情
          orderDetail.value = newOrderDetail
          
          console.log('🎉 从我的接单数据加载订单详情成功')
          console.log('🎉 最终订单状态:', orderDetail.value.status)
          console.log('🎉 完整订单详情:', orderDetail.value)
          
          // 强制触发响应式更新
          nextTick(() => {
            console.log('🔄 响应式更新后的状态:', orderDetail.value.status)
          })
          
          return
        } else {
          console.log('❌ 所有匹配方式都失败了')
          console.log('❌ 可用的订单ID列表:', myOrdersList.map((o: any) => ({ id: o.id, type: typeof o.id, status: o.status })))
        }
      } catch (error) {
        console.error('❌ 解析我的接单数据失败:', error)
      }
    } else {
      console.log('❌ 未找到我的接单数据')
    }
  } else {
    console.log('❌ 未找到订单ID参数')
  }
  
  // 尝试从本地存储获取订单数据
  const storedOrder = uni.getStorageSync('currentOrderDetail')
  if (storedOrder) {
    orderDetail.value = {
      ...orderDetail.value,
      ...storedOrder,
      serviceType: storedOrder.type === 'delivery' ? 'takeout' : 'express'
    }
    console.log('📦 从本地存储加载订单数据:', orderDetail.value)
  } else if (orderId) {
    console.log('🌐 尝试从后端API加载订单详情')
    loadOrderDetail(Number(orderId))
  }
  
  console.log('=== 📊 数据加载完成 ===')
  console.log('📊 最终订单状态:', orderDetail.value.status)
  console.log('📊 最终订单详情:', orderDetail.value)
  
  // 加载订单图片
  loadOrderImages()
  
  // 手机端额外数据同步检查
  if (orderId) {
    setTimeout(() => {
      console.log('=== 📱 手机端额外数据同步检查 ===')
      forceRefreshOrderData(orderId)
    }, 500) // 延迟500ms确保数据完全同步
  }
})

// 页面显示时刷新数据
const onShow = () => {
  console.log('=== 🔄 页面显示，开始刷新数据 ===')
  
  // 获取当前订单ID
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const orderId = (currentPage as any).options?.id
  
  if (orderId) {
    console.log('🔄 刷新订单ID:', orderId)
    
    // 强制延迟刷新，确保数据同步
    setTimeout(() => {
      forceRefreshOrderData(orderId)
    }, 100)
  } else {
    console.log('❌ 刷新时未找到订单ID')
  }
}

// 强制刷新订单数据（用于手机端数据同步）
const forceRefreshOrderData = (orderId: string | number) => {
  console.log('=== 🚀 强制刷新订单数据 ===')
  
  // 重新从我的接单数据加载
  const myOrders = uni.getStorageSync('myOrders')
  if (myOrders) {
    try {
      const myOrdersList = JSON.parse(myOrders)
      console.log('🔄 我的接单数据列表:', myOrdersList)
      
      // 尝试多种匹配方式
      let myOrder = null
      
      // 方式1：直接ID匹配
      myOrder = myOrdersList.find((order: any) => order.id === Number(orderId))
      if (!myOrder) {
        // 方式2：字符串ID匹配
        myOrder = myOrdersList.find((order: any) => order.id.toString() === orderId.toString())
      }
      if (!myOrder) {
        // 方式3：宽松比较
        myOrder = myOrdersList.find((order: any) => order.id == orderId)
      }
      
      if (myOrder) {
        console.log('✅ 强制刷新时找到匹配的订单:', myOrder)
        console.log('✅ 订单状态:', myOrder.status)
        console.log('✅ 当前显示状态:', orderDetail.value.status)
        
        // 强制更新状态，即使状态相同也要更新
        const oldStatus = orderDetail.value.status
        orderDetail.value.status = myOrder.status
        orderDetail.value.completeTime = myOrder.completeTime
        
        console.log('🔄 状态已强制更新:', oldStatus, '→', orderDetail.value.status)
        
        // 强制触发响应式更新
        nextTick(() => {
          console.log('🔄 强制刷新后的状态:', orderDetail.value.status)
          
          // 再次检查状态是否正确
          if (orderDetail.value.status !== myOrder.status) {
            console.log('⚠️ 状态更新失败，尝试直接赋值')
            orderDetail.value.status = myOrder.status
          }
        })
        
        // 显示成功提示
        uni.showToast({
          title: '数据已同步',
          icon: 'success',
          duration: 1000
        })
      } else {
        console.log('❌ 强制刷新时未找到匹配的订单')
      }
    } catch (error) {
      console.error('❌ 强制刷新订单数据失败:', error)
    }
  } else {
    console.log('❌ 强制刷新时未找到我的接单数据')
  }
}

// 加载订单详情
const loadOrderDetail = async (orderId: number) => {
  try {
    // 这里应该根据订单ID从后端获取详情数据
    // 现在先检查是否在我的接单中
    const userId = uni.getStorageSync('userId')
    if (userId) {
      const response = await uni.request({
        url: `http://localhost:3005/jjk/myOrders/user/${userId}`,
        method: 'GET'
      })
      
      if (response.data.success) {
        const myOrder = response.data.data.find((order: any) => order.orderId === orderId)
        if (myOrder) {
          // 订单已被当前用户接取
          orderDetail.value.status = myOrder.status
          orderDetail.value.rider = {
            name: '我',
            phone: uni.getStorageSync('userPhone') || '您的手机号'
          }
        }
      }
    }
    
    console.log('加载订单详情:', orderId)
  } catch (error) {
    console.error('加载订单详情失败:', error)
  }
}

// 获取页面标题
const getPageTitle = (): string => {
  if (orderDetail.value.serviceType === 'express') {
    return '快递代取详情'
  } else if (orderDetail.value.serviceType === 'takeout') {
    return '外卖代取详情'
  }
  return '订单详情'
}

// 获取状态文本
const getStatusText = (status: OrderStatus): string => {
  const statusMap = {
    'ongoing': '进行中',
    'completed': '已完成'
  }
  return statusMap[status]
}

// 获取状态描述
const getStatusDesc = (status: OrderStatus): string => {
  const statusMap = {
    'ongoing': '订单进行中',
    'completed': '订单已完成'
  }
  return statusMap[status]
}

// 获取服务类型文本
const getServiceTypeText = (serviceType: ServiceType): string => {
  const typeMap = {
    'express': '快递代取',
    'takeout': '外卖代取',
    'shopping': '代购服务',
    'document': '文件代取',
    'medicine': '药品代购',
    'other': '其他服务'
  }
  return typeMap[serviceType] || '未知服务'
}

// 获取服务类型图标
const getServiceTypeIcon = (serviceType: ServiceType): string => {
  const iconMap = {
    'express': '📦',
    'takeout': '🍔',
    'shopping': '🛒',
    'document': '📄',
    'medicine': '💊',
    'other': '🔧'
  }
  return iconMap[serviceType] || '📋'
}

// 获取优先级文本和样式
const getPriorityInfo = (priority?: string) => {
  const priorityMap: Record<string, { text: string; color: string; bgColor: string }> = {
    'low': { text: '低优先级', color: '#10b981', bgColor: '#dcfce7' },
    'normal': { text: '普通', color: '#6b7280', bgColor: '#f3f4f6' },
    'high': { text: '高优先级', color: '#f59e0b', bgColor: '#fef3c7' },
    'urgent': { text: '紧急', color: '#ef4444', bgColor: '#fee2e2' }
  }
  return priorityMap[priority || 'normal']
}

// 方法
const goBack = () => {
  uni.navigateBack()
}

// 刷新订单数据
const refreshOrderData = () => {
  console.log('=== 🔄 手动刷新订单数据 ===')
  
  // 重新获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const orderId = (currentPage as any).options?.id
  
  if (orderId) {
    console.log('🔄 重新加载订单ID:', orderId)
    
    // 显示加载提示
    uni.showLoading({
      title: '正在同步数据...',
      mask: true
    })
    
    // 延迟执行，确保手机端数据同步
    setTimeout(() => {
      // 重新从我的接单数据加载
      const myOrders = uni.getStorageSync('myOrders')
      if (myOrders) {
        try {
          const myOrdersList = JSON.parse(myOrders)
          console.log('🔄 我的接单数据列表:', myOrdersList)
          
          // 尝试多种匹配方式
          let myOrder = null
          
          // 方式1：直接ID匹配
          myOrder = myOrdersList.find((order: any) => order.id === Number(orderId))
          if (!myOrder) {
            // 方式2：字符串ID匹配
            myOrder = myOrdersList.find((order: any) => order.id.toString() === orderId.toString())
          }
          if (!myOrder) {
            // 方式3：宽松比较
            myOrder = myOrdersList.find((order: any) => order.id == orderId)
          }
          
          if (myOrder) {
            console.log('✅ 刷新时找到匹配的订单:', myOrder)
            console.log('✅ 订单状态:', myOrder.status)
            
            // 完全重新构建订单详情对象
            const newOrderDetail = {
              id: myOrder.id,
              orderId: `MY${myOrder.id}`,
              serviceType: myOrder.serviceType || 'express',
              status: myOrder.status,
              title: myOrder.title,
              pickup: myOrder.pickup,
              delivery: myOrder.delivery,
              price: myOrder.price,
              totalAmount: myOrder.price,
              orderTime: myOrder.acceptTime,
              completeTime: myOrder.completeTime,
              deliveryLocation: myOrder.delivery,
              deliveryTime: '立即送出',
              baseFee: parseFloat(myOrder.price),
              tipAmount: 0,
              time: myOrder.acceptTime,
              address: `${myOrder.pickup} → ${myOrder.delivery}`,
              contactInfo: '我的接单',
              image: '',
              customerName: '我',
              customerPhone: '我的手机号',
              extraAmount: '0'
            }
            
            // 完全替换订单详情
            orderDetail.value = newOrderDetail
            
            console.log('✅ 刷新订单数据成功')
            console.log('✅ 最终订单状态:', orderDetail.value.status)
            
            // 强制触发响应式更新
            nextTick(() => {
              console.log('🔄 响应式更新后的状态:', orderDetail.value.status)
              
              // 隐藏加载提示
              uni.hideLoading()
              
              // 显示成功提示
              uni.showToast({
                title: '数据已同步',
                icon: 'success',
                duration: 2000
              })
            })
          } else {
            console.log('❌ 刷新时未找到匹配的订单')
            uni.hideLoading()
            uni.showToast({
              title: '未找到订单数据',
              icon: 'error'
            })
          }
        } catch (error) {
          console.error('❌ 刷新订单数据失败:', error)
          uni.hideLoading()
          uni.showToast({
            title: '刷新失败',
            icon: 'error'
          })
        }
      } else {
        console.log('❌ 刷新时未找到我的接单数据')
        uni.hideLoading()
        uni.showToast({
          title: '未找到订单数据',
          icon: 'error'
        })
      }
    }, 200) // 手机端延迟200ms确保数据同步
  } else {
    console.log('❌ 刷新时未找到订单ID')
    uni.showToast({
      title: '参数错误',
      icon: 'error'
    })
  }
}


// 预览图片功能已移到具体的预览函数中

// 显示拍照选项
const showCameraOptions = () => {
  if (orderImages.value.length >= maxImageCount) {
    uni.showToast({
      title: `最多只能拍摄${maxImageCount}张图片`,
      icon: 'none'
    })
    return
  }

  uni.showActionSheet({
    itemList: ['拍照', '从相册选择'],
    success: (res: any) => {
      if (res.tapIndex === 0) {
        openCamera()
      } else if (res.tapIndex === 1) {
        chooseFromAlbum()
      }
    }
  })
}

// 打开摄像头拍照
const openCamera = () => {
  const remainingCount = maxImageCount - orderImages.value.length
  
  uni.chooseImage({
    count: Math.min(1, remainingCount), // 拍照一次只能拍一张
    sizeType: ['compressed'],
    sourceType: ['camera'],
    success: (res: any) => {
      handleImageSelection(res.tempFilePaths)
    },
    fail: (err: any) => {
      console.error('拍照失败:', err)
      uni.showToast({
        title: '拍照失败，请重试',
        icon: 'error'
      })
    }
  })
}

// 从相册选择图片
const chooseFromAlbum = () => {
  const remainingCount = maxImageCount - orderImages.value.length
  
  uni.chooseImage({
    count: Math.min(9, remainingCount),
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: (res: any) => {
      handleImageSelection(res.tempFilePaths)
    },
    fail: (err: any) => {
      console.error('选择图片失败:', err)
      uni.showToast({
        title: '选择图片失败，请重试',
        icon: 'error'
      })
    }
  })
}

// 处理图片选择结果
const handleImageSelection = (tempFilePaths: string[]) => {
  uploading.value = true
  
  tempFilePaths.forEach(filePath => {
    const imageItem = {
      url: filePath,
      localPath: filePath,
      timestamp: new Date().toLocaleString()
    }
    orderImages.value.push(imageItem)
  })
  
  // 保存图片到本地存储
  saveOrderImages()
  
  uploading.value = false
  
  uni.showToast({
    title: `成功添加${tempFilePaths.length}张图片`,
    icon: 'success'
  })
}

// 保存订单图片到本地存储
const saveOrderImages = () => {
  const orderImageKey = `orderImages_${orderDetail.value.id}`
  uni.setStorageSync(orderImageKey, JSON.stringify(orderImages.value))
  console.log('订单图片已保存到本地存储:', orderImageKey)
}

// 从本地存储加载订单图片
const loadOrderImages = () => {
  const orderImageKey = `orderImages_${orderDetail.value.id}`
  const storedImages = uni.getStorageSync(orderImageKey)
  if (storedImages) {
    try {
      orderImages.value = JSON.parse(storedImages)
      console.log('从本地存储加载订单图片:', orderImages.value.length, '张')
    } catch (error) {
      console.error('加载订单图片失败:', error)
      orderImages.value = []
    }
  }
}

// 预览订单图片
const previewOrderImage = (imageUrl: string) => {
  const urls = orderImages.value.map(item => item.url)
  uni.previewImage({
    urls: urls,
    current: imageUrl
  })
}

// 删除订单图片
const deleteOrderImage = (index: number) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这张图片吗？',
    success: (res: any) => {
      if (res.confirm) {
        orderImages.value.splice(index, 1)
        // 更新本地存储
        saveOrderImages()
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
      }
    }
  })
}

const makePhoneCall = (phoneNumber: string) => {
  // 清理电话号码，只保留数字
  const cleanPhone = phoneNumber.replace(/[^\d]/g, '')
  
  if (cleanPhone.length < 7) {
    uni.showToast({
      title: '电话号码格式错误',
      icon: 'error'
    })
    return
  }
  
  uni.showModal({
    title: '拨打电话',
    content: `确定要拨打电话 ${phoneNumber} 吗？`,
    success: (res: any) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: cleanPhone,
          success: () => {
            console.log('拨打电话成功:', cleanPhone)
          },
          fail: (err: any) => {
            console.error('拨打电话失败:', err)
            uni.showToast({
              title: '拨打电话失败',
              icon: 'error'
            })
          }
        })
      }
    }
  })
}

// 从联系信息中提取并拨打电话
const extractAndCallPhone = (contactInfo: string) => {
  // 使用正则表达式提取电话号码
  const phoneRegex = /1[3-9]\d{9}|0\d{2,3}-?\d{7,8}|\d{3,4}-?\d{7,8}/g
  const phones = contactInfo.match(phoneRegex)
  
  if (phones && phones.length > 0) {
    if (phones.length === 1) {
      // 只有一个电话号码，直接拨打
      makePhoneCall(phones[0])
    } else {
      // 多个电话号码，让用户选择
      uni.showActionSheet({
        itemList: phones.map(phone => `拨打 ${phone}`),
        success: (res: any) => {
          makePhoneCall(phones[res.tapIndex])
        }
      })
    }
  } else {
    uni.showToast({
      title: '未找到有效的电话号码',
      icon: 'none'
    })
  }
}

const contactRider = () => {
  if (orderDetail.value.rider) {
    uni.showActionSheet({
      itemList: ['拨打电话', '发送短信'],
      success: (res: any) => {
        if (res.tapIndex === 0) {
          uni.makePhoneCall({
            phoneNumber: orderDetail.value.rider!.phone
          })
        } else if (res.tapIndex === 1) {
          uni.showToast({
            title: '发送短信功能开发中',
            icon: 'none'
          })
        }
      }
    })
  }
}

const grabThisOrder = async () => {
  if (grabbing.value) return
  
  uni.showModal({
    title: '确认抢单',
    content: `确定要抢取这个订单吗？\n配送费：¥${orderDetail.value.totalAmount}`,
    success: async (res: any) => {
      if (res.confirm) {
        grabbing.value = true
        
        try {
          const userId = uni.getStorageSync('userId') || 'user_' + Date.now()
          if (!uni.getStorageSync('userId')) {
            uni.setStorageSync('userId', userId)
          }
          
          const response = await uni.request({
            url: 'http://localhost:3005/jjk/myOrders/add',
            method: 'POST',
            data: {
              orderId: orderDetail.value.id,
              userId: userId,
              title: '万能任务【帮拿外卖】',
              pickup: orderDetail.value.pickup,
              delivery: orderDetail.value.delivery,
              price: orderDetail.value.totalAmount,
              originalOrder: {
                timeSlot: '17-19',
                type: 'errand',
                time: orderDetail.value.time
              }
            }
          })
          
          if (response.data.success) {
            orderDetail.value.status = 'ongoing'
            orderDetail.value.rider = {
              name: '我',
              phone: uni.getStorageSync('userPhone') || '您的手机号'
            }
            
            uni.showToast({
              title: '抢单成功！',
              icon: 'success'
            })
          } else {
            uni.showToast({
              title: response.data.message || '抢单失败',
              icon: 'error'
            })
          }
        } catch (error) {
          console.error('抢单失败:', error)
          uni.showToast({
            title: '抢单失败，请重试',
            icon: 'error'
          })
        } finally {
          grabbing.value = false
        }
      }
    }
  })
}

const completeThisOrder = () => {
  uni.showModal({
    title: '确认完成',
    content: '确定要完成这个订单吗？',
    success: async (res: any) => {
      if (res.confirm) {
        try {
          const userId = uni.getStorageSync('userId')
          
          const response = await uni.request({
            url: `http://localhost:3005/jjk/myOrders/complete/${orderDetail.value.id}`,
            method: 'PUT',
            data: { userId: userId }
          })
          
          if (response.data.success) {
            orderDetail.value.status = 'completed'
            
            uni.showToast({
              title: '订单已完成！',
              icon: 'success'
            })
            
            // 2秒后返回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 2000)
          } else {
            uni.showToast({
              title: response.data.message || '完成订单失败',
              icon: 'error'
            })
          }
        } catch (error) {
          console.error('完成订单失败:', error)
          uni.showToast({
            title: '完成订单失败，请重试',
            icon: 'error'
          })
        }
      }
    }
  })
}

// 切换调试信息显示
const toggleDebugInfo = () => {
  showDebugInfo.value = !showDebugInfo.value
}

// 底部空间控制方法已移除，改为固定布局
</script>

<style lang="scss" scoped>
/* 页面根容器 */
.order-detail-page {
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 订单详情内容区域 */
.order-detail-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  /* 为底部操作按钮预留空间 */
  padding-bottom: 80px;
}

/* 底部安全区域样式已移除，改为固定布局 */

/* 导航栏右侧按钮样式 */
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 20px;
  border: 1px solid #e9ecef;
  
  &:active {
    background-color: #e9ecef;
  }
}

.refresh-icon {
  font-size: 16px;
}

.refresh-text {
  font-size: 14px;
  color: #6c757d;
}

/* 订单信息卡片 */
.order-info-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 快递代取详情卡片 */
.express-details-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-left: 3px solid #4CAF50;
}

/* 外卖代取详情卡片 */
.takeout-details-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-left: 3px solid #FF9800;
}

/* 骑手信息区域 */
.rider-section {
  margin-bottom: 8px;
}

.rider-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-left: 3px solid #2196F3;
}

.rider-header {
  margin-bottom: 8px;
}

.rider-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.rider-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rider-name {
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.rider-phone-section {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  
  &:active {
    background-color: #e0f2fe;
    border-color: #7dd3fc;
    transform: scale(0.98);
  }
  
  .rider-phone {
    font-size: 11px;
    color: #0369a1;
    font-weight: 500;
    margin-right: 6px;
  }
  
  .call-hint {
    font-size: 10px;
    color: #0284c7;
    background-color: #bae6fd;
    padding: 1px 4px;
    border-radius: 8px;
  }
}

/* 底部操作按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
  z-index: 100;
  
  &.ongoing {
    .complete-btn {
      width: 100%;
      height: 40px;
      background-color: #16a34a;
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
      
      &:active {
        background-color: #15803d;
        box-shadow: 0 4px 8px rgba(22, 163, 74, 0.4);
      }
    }
  }
  
  &.completed {
    text-align: center;
    
    .status-text {
      font-size: 14px;
      color: #16a34a;
      font-weight: 600;
    }
  }
}

/* 详情项样式 */
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .label {
    font-size: 12px;
    color: #6b7280;
    min-width: 60px;
  }
  
  .value {
    font-size: 12px;
    color: #1f2937;
    font-weight: 500;
    text-align: right;
    flex: 1;
    margin-left: 12px;
    
    &.description {
      background-color: #f8f9fa;
      padding: 8px;
      border-radius: 6px;
      line-height: 1.4;
      border: 1px solid #e9ecef;
    }
  }
}

/* 状态卡片样式 */
.status-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .status-header {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    .status-main {
      .status-title {
        font-size: 18px;
        font-weight: 700;
        display: block;
        margin-bottom: 4px;
      }
      
      .status-desc {
        font-size: 12px;
        opacity: 0.9;
      }
    }
    
    .priority-badge {
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 600;
      margin-left: 12px;
    }
  }
  
  .status-icon {
    font-size: 32px;
    margin-left: 12px;
  }
}

/* 卡片头部样式 */
.card-header {
  margin-bottom: 8px;
  
  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
  }
}

/* 服务类型样式 */
.service-type {
  color: #2563eb !important;
  font-weight: 600;
}

/* 价格样式 */
.price {
  color: #dc2626 !important;
  font-weight: 600;
}

.order-info-card,
.express-details-card,
.takeout-details-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;
}

.express-details-card {
  border-left: 6px solid #4CAF50;
}

.takeout-details-card {
  border-left: 6px solid #FF9800;
}

.order-info-card {
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .order-title {
      font-size: 20px;
      font-weight: 600;
      color: #1a1a1a;
      letter-spacing: -0.3px;
    }
    
    .order-status {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      
      &.available {
        background-color: #fff7ed;
        color: #ea580c;
        border: 1px solid #fed7aa;
      }
      
      &.accepted {
        background-color: #eff6ff;
        color: #2563eb;
        border: 1px solid #bfdbfe;
      }
      
      &.completed {
        background-color: #f0fdf4;
        color: #16a34a;
        border: 1px solid #bbf7d0;
      }
    }
  }

  .detail-item {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;

    .label {
      font-size: 14px;
      color: #6b7280;
      margin-right: 12px;
      min-width: 80px;
      font-weight: 500;
    }

    .value {
      font-size: 14px;
      color: #1f2937;
      flex: 1;
      line-height: 1.5;
    }

    &.description {
      flex-direction: column;
      align-items: flex-start;

      .label {
        margin-bottom: 8px;
        min-width: auto;
      }
    }

    &.contact {
      .contact-info {
        font-size: 14px;
        color: #333;
        line-height: 1.4;
      }
    }
  }
}

.location-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;

  .location-header {
    margin-bottom: 20px;
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      letter-spacing: -0.2px;
    }
  }

  .location-info {
    position: relative;
    
    .location-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .location-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 12px;
        margin-top: 4px;
        
        &.pickup {
          background-color: #4caf50;
        }
        
        &.delivery {
          background-color: #f44336;
        }
      }
      
      .location-content {
        flex: 1;
        
        .location-label {
          display: block;
          font-size: 12px;
          color: #9ca3af;
          margin-bottom: 6px;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        
        .location-text {
          font-size: 14px;
          color: #1f2937;
          line-height: 1.5;
          font-weight: 500;
        }
      }
    }
    
    .location-line {
      position: absolute;
      left: 5px;
      top: 16px;
      bottom: 36px;
      width: 2px;
      background: linear-gradient(to bottom, #4caf50, #f44336);
    }
  }
}

.image-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;

  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    display: block;
    letter-spacing: -0.2px;
  }

  .camera-area {
    margin-bottom: 16px;
  }

  .camera-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(1px);
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    }
    
    &:disabled {
      opacity: 0.6;
      transform: none;
    }
    
    .btn-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      
      .camera-icon {
        font-size: 20px;
      }
      
      .btn-text {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

  .image-preview {
    margin-bottom: 16px;
    
    .preview-header {
      margin-bottom: 12px;
      
      .preview-title {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }
    
    .image-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      
      .image-item {
        position: relative;
        width: calc((100% - 24px) / 3);
        height: 100px;
        border-radius: 12px;
        overflow: hidden;
        background-color: #f5f5f5;
        
        .preview-image {
          width: 100%;
          height: 100%;
        }
        
        .image-actions {
          position: absolute;
          top: 4px;
          right: 4px;
          display: flex;
          gap: 4px;
          
          .action-btn {
            width: 24px;
            height: 24px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            
            &:active {
              transform: scale(0.95);
            }
            
            &.delete {
              background: rgba(239, 68, 68, 0.8);
            }
            
            &.preview {
              background: rgba(59, 130, 246, 0.8);
            }
          }
        }
      }
    }
  }

  .empty-tip {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border-radius: 12px;
    border: 2px dashed #cbd5e0;
    margin-top: 16px;
    
    .tip-text {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: #4a5568;
      margin-bottom: 8px;
    }
    
    .tip-desc {
      font-size: 14px;
      color: #718096;
      line-height: 1.5;
    }
  }
}

.amount-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;

  .amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;

    &:last-child {
      border-bottom: none;
    }

    &.total {
      border-top: 2px solid #f3f4f6;
      margin-top: 12px;
      padding-top: 16px;
      
      .total-amount {
        font-size: 20px;
        font-weight: 700;
        color: #dc2626;
      }
    }

    .amount-label {
      font-size: 14px;
      color: #6b7280;
      font-weight: 500;
    }

    .amount-value {
      font-size: 14px;
      color: #1f2937;
      font-weight: 500;

      &.phone {
        color: #2563eb;
        text-decoration: none;
        border-bottom: 1px solid #2563eb;
      }
    }
  }
}

.rider-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;

  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    display: block;
    letter-spacing: -0.2px;
  }

  .rider-info {
    display: flex;
    align-items: center;

    .rider-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 12px;
      background-color: #f0f0f0;

      .avatar-image {
        width: 100%;
        height: 100%;
      }
    }

    .rider-details {
      flex: 1;

      .rider-name {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 4px;
      }

      .rider-phone {
        font-size: 14px;
        color: #6b7280;
      }
    }

    .contact-action {
      .contact-btn {
        background-color: #2563eb;
        color: #fff;
        border: none;
        border-radius: 24px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        transition: background-color 0.2s ease;
        
        &:hover {
          background-color: #1d4ed8;
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 16px 20px;
  /* 增加底部间距，确保不与底部导航栏重叠 */
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 100;
  
  &.ongoing {
    .complete-btn {
      width: 100%;
      height: 48px;
      background-color: #16a34a;
      color: #fff;
      border: none;
      border-radius: 24px;
      font-size: 16px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
      
      &:active {
        background-color: #15803d;
        box-shadow: 0 6px 16px rgba(22, 163, 74, 0.4);
      }
    }
  }
  
  &.completed {
    text-align: center;
    
    .status-text {
      font-size: 16px;
      color: #16a34a;
      font-weight: 600;
    }
  }
}

/* 物品列表样式 */
.items-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
  
  .section-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    display: block;
  }
  
  .item-list {
    .item-item {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      border: 1px solid #e9ecef;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .item-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        
        .item-number {
          font-size: 14px;
          color: #6b7280;
          margin-right: 12px;
          font-weight: 500;
        }
        
        .item-size {
          flex: 1;
          font-size: 14px;
          color: #1f2937;
          font-weight: 500;
        }
        
        .item-price {
          font-size: 16px;
          color: #dc2626;
          font-weight: 600;
        }
      }
      
      .item-details {
        display: flex;
        flex-direction: column;
        gap: 8px;
        
        .pickup-code,
        .pickup-location {
          font-size: 13px;
          color: #6b7280;
          
          &:before {
            content: '📍 ';
            margin-right: 4px;
          }
        }
      }
    }
  }
}

/* 状态卡片样式 */
.status-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 24px;
  margin: 20px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .status-header {
    .status-title {
      font-size: 24px;
      font-weight: 700;
      display: block;
      margin-bottom: 8px;
    }
    
    .status-desc {
      font-size: 14px;
      opacity: 0.9;
    }
  }
  
  .status-icon {
    font-size: 48px;
    
    &.express {
      color: #4CAF50;
    }
    
    &.takeout {
      color: #FF9800;
    }
  }
}

/* 卡片头部样式 */
.card-header {
  margin-bottom: 20px;
  
  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.2px;
  }
}

/* 服务类型样式 */
.service-type {
  color: #2563eb !important;
  font-weight: 600;
}

/* 价格样式 */
.price {
  color: #dc2626 !important;
  font-weight: 600;
}

/* 联系信息样式 */
.contact-section, .contact-detail {
  .customer-info, .contact-content {
    flex: 1;
    margin-left: 12px;
  }
  
  .customer-name {
    margin-bottom: 8px;
    
    .name-text {
      font-size: 14px;
      color: #1f2937;
      font-weight: 600;
    }
  }
  
  .customer-phone, .contact-content {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:active {
      background-color: #e0f2fe;
      border-color: #7dd3fc;
      transform: scale(0.98);
    }
  }
  
  .phone-icon {
    font-size: 16px;
    margin-right: 8px;
  }
  
  .phone-text, .contact-text {
    flex: 1;
    font-size: 14px;
    color: #0369a1;
    font-weight: 500;
  }
  
  .call-hint {
    font-size: 12px;
    color: #0284c7;
    background-color: #bae6fd;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
  }
}

.contact-detail {
  .contact-content {
    flex-direction: column;
    align-items: flex-start;
    
    .contact-text {
      line-height: 1.5;
      margin-bottom: 6px;
    }
    
    .call-hint {
      align-self: flex-end;
      margin-left: 0;
    }
  }
}

/* 新增服务类型特定样式 */
.shopping-details-card, .document-details-card, .medicine-details-card, .other-details-card, .item-specs-card {
  background-color: #fff;
  border-radius: 12px;
  margin: 16px 20px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.shopping-details-card {
  border-left: 4px solid #2196F3;
}

.document-details-card {
  border-left: 4px solid #9C27B0;
}

.medicine-details-card {
  border-left: 4px solid #F44336;
}

.other-details-card {
  border-left: 4px solid #607D8B;
}

.item-specs-card {
  border-left: 4px solid #4CAF50;
}

/* 代购物品列表样式 */
.shopping-items-section {
  margin-top: 20px;
  
  .section-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    display: block;
  }
  
  .shopping-item-list {
    .shopping-item {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      border: 1px solid #e9ecef;
      
      .item-main {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        
        .item-number {
          background-color: #2196F3;
          color: #fff;
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 4px;
          margin-right: 8px;
          font-weight: 600;
        }
        
        .item-name {
          flex: 1;
          font-size: 15px;
          font-weight: 500;
          color: #333;
        }
        
        .item-quantity {
          font-size: 14px;
          color: #666;
          background-color: #e3f2fd;
          padding: 2px 8px;
          border-radius: 12px;
        }
      }
      
      .item-specs {
        margin-bottom: 8px;
        
        .item-brand, .item-spec {
          font-size: 13px;
          color: #666;
          margin-right: 12px;
        }
      }
      
      .item-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .item-price {
          font-size: 14px;
          color: #2196F3;
          font-weight: 600;
        }
        
        .item-alt {
          font-size: 12px;
          color: #4CAF50;
          background-color: #e8f5e8;
          padding: 2px 8px;
          border-radius: 12px;
        }
      }
    }
  }
}

/* 提醒卡片样式 */
.notice-card {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
  
  &.medicine {
    background-color: #f8d7da;
    border-color: #f1aeb5;
  }
  
  .notice-title {
    font-size: 14px;
    font-weight: 600;
    color: #856404;
    margin-bottom: 8px;
    display: block;
  }
  
  .notice-text {
    font-size: 13px;
    color: #856404;
    line-height: 1.5;
  }
  
  &.medicine {
    .notice-title, .notice-text {
      color: #721c24;
    }
  }
}

/* 详情项样式增强 */
.detail-item {
  &.full-width {
    flex-direction: column;
    align-items: flex-start;
    
    .label {
      margin-bottom: 8px;
    }
    
    .value.description {
      background-color: #f8f9fa;
      padding: 12px;
      border-radius: 8px;
      line-height: 1.6;
      border: 1px solid #e9ecef;
    }
  }
  
  .value {
    &.fragile {
      color: #f44336;
      font-weight: 600;
    }
    
    &.urgent {
      color: #f44336;
      font-weight: 600;
    }
  }
}

/* 状态卡片增强样式 */
.status-card {
  &.express {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  }
  
  &.takeout {
    background: linear-gradient(135deg, #FF9800 0%, #F57400 100%);
  }
  
  &.shopping {
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
  }
  
  &.document {
    background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%);
  }
  
  &.medicine {
    background: linear-gradient(135deg, #F44336 0%, #C62828 100%);
  }
  
  &.other {
    background: linear-gradient(135deg, #607D8B 0%, #37474F 100%);
  }
  
  .status-header {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    .status-main {
      .status-title {
        font-size: 24px;
        font-weight: 700;
        display: block;
        margin-bottom: 8px;
      }
      
      .status-desc {
        font-size: 14px;
        opacity: 0.9;
      }
    }
    
    .priority-badge {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      margin-left: 16px;
    }
  }
  
  .status-icon {
    font-size: 48px;
    margin-left: 16px;
  }
}

/* 调试信息区域样式 */
.debug-section {
  background-color: #f8f9fa;
  margin: 16px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  overflow: hidden;
  
  .debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #e9ecef;
    border-bottom: 1px solid #dee2e6;
    
    .debug-title {
      font-size: 14px;
      font-weight: 600;
      color: #495057;
    }
    
    .debug-toggle {
      font-size: 12px;
      color: #6c757d;
      padding: 4px 8px;
      border-radius: 4px;
      background-color: #fff;
      cursor: pointer;
      
      &:active {
        background-color: #f8f9fa;
      }
    }
  }
  
  .debug-content {
    padding: 16px;
    
    .debug-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .debug-label {
        font-size: 12px;
        color: #6c757d;
        min-width: 80px;
      }
      
      .debug-value {
        font-size: 12px;
        color: #495057;
        font-weight: 500;
        
        &.ongoing {
          color: #0d6efd;
        }
        
        &.completed {
          color: #198754;
        }
      }
      
      .space-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .space-btn {
          width: 24px;
          height: 24px;
          border: 1px solid #dee2e6;
          background-color: #fff;
          border-radius: 4px;
          font-size: 16px;
          font-weight: 600;
          color: #6c757d;
          
          &:active {
            background-color: #e9ecef;
          }
        }
        
        .space-value {
          font-size: 12px;
          color: #495057;
          font-weight: 600;
          min-width: 40px;
          text-align: center;
        }
      }
    }
  }
}

/* 响应式设计和设备适配 */
@media screen and (max-width: 375px) {
  .order-detail-content {
    padding-bottom: calc(env(safe-area-inset-bottom) + 220px);
  }
  
  .bottom-safe-area {
    height: calc(env(safe-area-inset-bottom) + 220px);
  }
  
  .status-card {
    margin: 16px;
    padding: 20px;
    
    .status-title {
      font-size: 20px;
    }
    
    .status-icon {
      font-size: 40px;
    }
  }
  
  .order-info-card,
  .express-details-card,
  .takeout-details-card,
  .shopping-details-card,
  .document-details-card,
  .medicine-details-card,
  .other-details-card,
  .item-specs-card {
    margin: 12px 16px;
    padding: 16px;
  }
}

/* 横屏适配 */
@media screen and (orientation: landscape) {
  .order-detail-content {
    padding-bottom: calc(env(safe-area-inset-bottom) + 180px);
  }
  
  .bottom-safe-area {
    height: calc(env(safe-area-inset-bottom) + 180px);
  }
  
  .bottom-actions {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .order-detail-page {
    background-color: #1a1a1a;
  }
  
  .order-info-card,
  .express-details-card,
  .takeout-details-card,
  .shopping-details-card,
  .document-details-card,
  .medicine-details-card,
  .other-details-card,
  .item-specs-card,
  .rider-card {
    background-color: #2d2d2d;
    color: #ffffff;
  }
  
  .detail-item .label {
    color: #a0a0a0;
  }
  
  .detail-item .value {
    color: #e0e0e0;
  }
  
  .bottom-actions {
    background-color: #2d2d2d;
    color: #ffffff;
  }
}
</style>
